body{ background-color:#fff;}

.card__boxs{ padding:20px; background-color:#f3f3f3;}
.card__box{ position:relative; border-radius:6px; background-color:#191919; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); overflow:hidden;}
.card__hd{ position:relative; padding:20px 10px; color:#fff; display: -webkit-box;display: -webkit-flex; display: flex;  -webkit-box-align: center;  -webkit-align-items: center; align-items: center; overflow:hidden;}
.card__hd-yh{width:100px; font-size:20px; text-align:center;}
.card__hd-xz{ position:relative; padding:5px 0 5px 10px; -webkit-box-flex: 1; -webkit-flex: 1;flex: 1;}
.card__hd-xz.th-xx_left:before{ opacity:.2}
.card__hd-ts{ position:absolute; top:8px; left:-32px; width:100px; height:20px; font-size:12px; color:#fff; text-align:center; line-height:18px; background-color:#ff1600; transform:rotate(-45deg);}
.card__bd{ padding:10px; background-color:#fff; border-radius:6px; display: -webkit-box;display: -webkit-flex; display: flex;  -webkit-box-align: center;  -webkit-align-items: center; align-items: center;}
.card__hd-tb{ width:100px; color:#ccc; font-size:40px; line-height:32px; text-align:center;}
.card__hd-xx{ -webkit-box-flex: 1; -webkit-flex: 1;flex: 1;}
.card__hd-xx .item{ padding:2px 0;}

.th-info__zhang{position:absolute; bottom:-10px; right:10px; width:60px; height:60px; color:#ff7f7f; transform:rotate(-35deg);}
.th-info__zhang.on{ color:#ccc;}
.th-info__zhang [class^="icon-"]{ position:absolute; top:50%; left:50%; margin:0; font-size:60px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.th-info__zhang .z{ position:absolute; top:50%; left:50%; width:100%; font-size:12px; text-align:center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}